<template>
	<view class="content">
		<image class="image" :src="config.temp.cover" mode="aspectFill" @click="toLook"></image>
		<view class="title">
			<view class="title-item" @click="toLook">
				<image :src="config.temp.avatar" mode="aspectFill"></image>
				<view class="">
					<view>{{config.temp.info}}</view>
					<view>{{config.temp.time}}</view>
				</view>
			</view>
			<view style="display: flex;">
				<u-button plain type="primary" size="mini" shape="circle" @click="toMake">作同款</u-button>
				<view v-if="type" style="margin-left: 20rpx;">
					<u-button plain type="error" size="mini" shape="circle" @click="dele">删除</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "card-list",
		props: ['config','type'],
		methods: {
			toMake() {
				const config = this.config
				const login = uni.getStorageSync("login")
				if (login == '') {
					uni.showModal({
						title: '提示',
						content: '请先登陆过后在尝试制作同款',
						showCancel: false,
						confirmText: '前往登录',
						success: () => {
							uni.switchTab({
								url: '/pages/mine/index'
							})
						}
					})
				} else if (config.is_template) {
					console.log('temp');
					const _id = config._id
					this.$u.route(`pages/index/make?id=${_id}`)
				} else {
					console.log('index');
					const _id = config.temp._id
					this.$u.route(`pages/index/make?id=${_id}`)
				}
			},
			toLook() {
				const _id = this.config._id
				this.$u.route(`pages/index/look?id=${_id}`)
			},
			share() {
				uni.setClipboardData({
					data:  this.config._id,
					success:res=>{
						uni.showModal({
							title:'提示',
							showCancel:false,
							confirmText:'我知道了',
							content:'已将作品Id复制到你的系统剪切板了，赶快分享给你的小伙伴，叫他们来给你送祝福把！'
						})
					}
				})
			},
			dele(){
				const id = this.config._id
				uni.showLoading({
					title:'删除中'
				})
				wx.cloud.callFunction({
					name:'uploadTemplate',
					data:{
						id,
						action:'dele'
					},
					success:res=>{
						this.$emit('delete')
						this.$u.toast('删除成功')
					}
				})
			}
		}
	}
</script>

<style scoped>
	.image {
		width: 710rpx;
		height: 400rpx;
	}

	.title-item image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
		display: flex;
	}

	.title-item view view {
		height: 40rpx;
		line-height: 40rpx;
	}

	.title-item {
		display: flex;
	}

	.title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.content {
		width: 710rpx;
		margin: 30rpx 0;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		box-shadow: 0 0 10rpx 6rpx #f0f0f0;
	}
</style>
